<template>
  <view class="container">
    <view class="topImg">
      <view class="logoShell"> </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <view class="form">
      <u--form :model="phoneForm" ref="form1" :rules="rules">
        <u-form-item prop="phoneNumber">
          <u--input
            v-model="phoneForm.phoneNumber"
            placeholder="请输入手机号"
            type="number"
            shape="circle"
            placeholderStyle="color: #d0d0d0;"
            fontSize="13"
            color="#000"
          ></u--input>
        </u-form-item>
        <u-form-item prop="code">
          <u-input
            v-model="phoneForm.code"
            placeholder="请填写验证码"
            type="number"
            shape="circle"
            placeholderStyle="color: #d0d0d0;"
            fontSize="13"
            color="#000"
          >
            <template slot="suffix">
              <view
                :class="codeColor ? 'codeBtnBlue' : 'codeBtnGray'"
                @click="getCode"
              >
                {{ frontText + codeText + endText }}
              </view>
            </template>
          </u-input>
        </u-form-item>
      </u--form>
    </view>
    <view class="text-center">
      <u-checkbox-group v-model="checkboxValue" @change="checkboxChange">
        <u-checkbox
          activeColor="#0c3190"
          size="20"
          shape="circle"
          name="checked"
        ></u-checkbox>
      </u-checkbox-group>
      <text @click="handleUserAgrement"
        >同意<text class="agreement">《格莱默用户使用协议》</text>进入</text
      >
    </view>
    <view class="btnView">
      <u-button
        type="primary"
        shape="circle"
        text="确定"
        @click="submit"
        :loading="btnLoading"
      ></u-button>
    </view>
  </view>
</template>

<script>
import {
  getSortMessageCode,
  sortMessageCodeViliate,
  receivePhone,
} from "@/api/login";
import { getToken, setToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      phoneForm: {
        phoneNumber: "",
        code: "",
      },
      rules: {
        phoneNumber: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          },
        ],
        code: [
          // {
          //   required: true,
          //   message: "请填写验证码",
          //   trigger: ["blur", "change"],
          // },
          // {
          //   validator: (rule, value, callback) => {
          //     var regex = /^\d{6}$/;
          //     return regex.test(value);
          //   },
          //   message: "验证码格式错误，请重新输入",
          //   trigger: ["change", "blur"],
          // },
        ],
      },
      checkboxValue: [],
      frontText: "",
      endText: "",
      btnLoading: false,
      codeText: "获取验证码",
      timeInterval: null,
      lock: true,
      codeColor: false,
    };
  },
  onReady() {
    this.$refs.form1.setRules(this.rules);
  },
  watch: {
    "phoneForm.phoneNumber"(newValue, oldValue) {
      this.$refs.form1.validateField("phoneNumber", (vaild) => {
        if (vaild.length == 0) {
          this.codeColor = true;
        } else if (this.codeText != "获取验证码") {
          this.codeColor = true;
        } else {
          this.codeColor = false;
        }
      });
    },
  },
  methods: {
    getCode() {
      this.$refs.form1.validateField("phoneNumber", (vaild) => {
        if (vaild.length == 0) {
          if (!this.lock) {
            this.$modal.showToast("请在倒计时结束后再获取");
            return;
          }
          this.lock = false;
          getSortMessageCode({
            phoneNumber: this.phoneForm.phoneNumber,
          })
            .then((res) => {
              this.$refs.uToast.show({
                type: "success",
                message: "验证码已通过短信形式发送至手机，请注意查收",
                position: "top",
              });
              this.frontText = "倒计时";
              this.endText = "s";
              this.codeText = 60;
              this.timeInterval = setInterval(() => {
                this.codeText = this.codeText - 1;
                if (this.codeText == 0) {
                  this.resetCodeText();
                }
              }, 1000);
            })
            .catch((err) => {
              if (err == 500) {
                this.lock = true;
              }
            });
        }
      });
    },
    resetCodeText() {
      this.codeText = "获取验证码";
      this.frontText = "";
      this.endText = "";
      clearInterval(this.timeInterval);
      this.lock = true;
    },
    submit() {
      this.$refs.form1
        .validate()
        .then((res) => {
          this.btnLoading = true;
          if (!this.checkboxValue.length) {
            this.btnLoading = false;
            this.$refs.uToast.show({
              message: "请勾选用户使用协议",
              type: "warning",
            });
            return;
          }
          sortMessageCodeViliate({
            phoneNumber: this.phoneForm.phoneNumber,
            code: this.phoneForm.code,
          })
            .then((res) => {
				
				console.log('res',res);
              if (res.code == 200 && res.msg == "验证码校验成功") {
                if (res.code == 200) {
                  this.$store.commit("SET_PHONE", this.phoneForm.phoneNumber);
                  let openid = this.$store.state.user.openid;
                  //登录
                  receivePhone({
                    phone: this.phoneForm.phoneNumber,
                    xcxOpenId: openid,
                  }).then((res) => {
                    if (!res.data.haveStatus) {
                      removeToken();
                      this.$refs.uToast.show({
                        message: "系统中未查询到该手机号，即将跳转到登录页面",
                        type: "default",
                      });
                      setTimeout(() => {
                        this.btnLoading = false;
                        uni.navigateTo({
                          url: "/pages/loginWithAccount/loginWithAccount",
                        });
                      }, 2000);
                    } else {
                      setToken(res.data.token);
                      this.$store.commit("SET_TOKEN", res.data.token);
                      this.btnLoading = false;
                      this.$store.dispatch("GetInfo").then((res) => {
                        uni.reLaunch({
                          url: "/pages/home/index",
                        });
                      });
                    }
                  });
                }
              } else {
                this.$store.commit("SET_PHONE", "");
                this.btnLoading = false;
                this.$refs.uToast.show({
                  message: "验证码有误，请重新输入",
                  type: "warning",
                });
                return;
              }
            })
            .catch((err) => {
              this.btnLoading = false;
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 复选框变化
    checkboxChange(e) {
      this.checkboxValue = e;
    },
    // 用户协议
    handleUserAgrement() {
      
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
  height: 100vh;
  .topImg {
    width: 95%;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    .logoShell {
      width: 150rpx;
      height: 150rpx;
      border-radius: 28rpx;
      background-image: url("https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/2201a960fb09474caaafa9153d6a1c651709278166768.png");
      background-size: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .form {
    margin: 0 auto 40rpx;
    padding: 0 60rpx;
    box-sizing: border-box;
    ::v-deep .u-input {
      background: #f6f6f6;
      border: none;
      padding-left: 36rpx !important;
      box-sizing: border-box;
    }
    ::v-deep .u-input__content {
      height: 65rpx;
    }
  }
  .text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8a;
    margin: 40rpx 0;
    .agreement {
      color: #0c3190;
    }
  }
  .btnView {
    width: 100%;
    height: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 60rpx;
    box-sizing: border-box;
    ::v-deep button {
      background: #99add5;
      border: none;
    }
  }
}
.codeBtnBlue {
  color: #0c3190;
  font-size: 24rpx;
  padding: 6rpx 10rpx;
}
.codeBtnGray {
  color: #d0d0d0;
  font-size: 24rpx;
  padding: 6rpx 10rpx;
}
</style>
